<template>
  <div class="edit_container">
    <el-tabs type="border-card" v-model="tabName" @tab-click="tabClick">
      <el-tab-pane label="基础设置" :name="tabList[0]">
        <el-form
          :ref="`form_${tabList[0]}`"
          v-show="tabName === tabList[0]"
          :model="formData"
          :rules="rules.form_basic"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="商品名称" prop="goods_name">
            <el-input
              v-model="formData.goods_name"
              placeholder="请输入商品名称"
              :maxlength="11"
              show-word-limit
              clearable
              prefix-icon="el-icon-s-goods"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="goods_cat">
            <el-cascader
              v-model="formData.goods_cat"
              :options="goods_catOptions"
              :props="goods_catProps"
              :style="{ width: '100%' }"
              placeholder="请选择分类"
              separator="-"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="上架状态" prop="goods_status">
            <el-radio-group v-model="formData.goods_status" size="medium">
              <el-radio
                v-for="(item, index) in goods_statusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否推荐" prop="isRecommend">
            <el-radio-group v-model="formData.isRecommend" size="medium">
              <el-radio
                v-for="(item, index) in isRecommendOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否新品" prop="isNew">
            <el-radio-group v-model="formData.isNew" size="medium">
              <el-radio
                v-for="(item, index) in isNewOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否热卖" prop="isHot">
            <el-radio-group v-model="formData.isHot" size="medium">
              <el-radio
                v-for="(item, index) in isHotOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序值" prop="goods_sort">
            <el-input-number
              v-model="formData.goods_sort"
              placeholder="排序值"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="市场价格" prop="origin_price">
            <el-input-number
              v-model="formData.origin_price"
              placeholder="市场价格"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="售卖价格" prop="actual_price">
            <el-input-number
              v-model="formData.actual_price"
              placeholder="售卖价格"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否包邮" prop="is_free_express">
            <el-radio-group v-model="formData.is_free_express" size="medium">
              <el-radio
                v-for="(item, index) in is_free_expressOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- <el-tab-pane label="规格属性" :name="tabList[1]">
        <el-form v-if="tabName === tabList[1]" :ref="`form_${tabList[1]}`">22222</el-form>
      </el-tab-pane>-->

      <el-tab-pane label="媒体属性" :name="tabList[1]">
        <el-form
          :ref="`form_${tabList[1]}`"
          v-show="tabName === tabList[1]"
          :model="formData"
          :rules="rules.form_photo"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="请上传图片" prop="fileList">
            <Upload
              :limit="10"
              :fileSize="5"
              fileType="image"
              :value="formData.fileList"
              @input="handleImage"
            ></Upload>
          </el-form-item>
          <el-form-item label="请上传视频" prop="videoList">
            <Upload
              :limit="1"
              :fileSize="20"
              fileType="video"
              :value="formData.videoList"
              @input="handleImage"
            ></Upload>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="商品详情" :name="tabList[2]">
        <el-form
          :ref="`form_${tabList[2]}`"
          v-show="tabName === tabList[2]"
          :model="formData"
          :rules="rules.form_detail"
          label-width="100px"
          size="medium"
        >
          <el-form-item prop="htmlContent">
            <editor v-model="formData.htmlContent" :min-height="400" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/UploadImage/index.vue'
export default {
  components: {
    Upload
  },
  data () {
    return {
      tabName: 'basic',
      tabList: ['basic', 'photo', 'detail'],
      formData: {
        goods_name: '',
        goods_cat: [],
        goods_status: 1,
        isRecommend: undefined,
        isNew: undefined,
        isHot: undefined,
        fileList: [],
        videoList: [],
        htmlContent: '',
      },
      rules: {
        // 基础设置校验规则
        form_basic: {
          goods_name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          goods_cat: [{
            required: true,
            type: 'array',
            message: '请至少选择一个分类',
            trigger: 'change'
          }],
          goods_sort: [{
            required: true,
            message: '请输入排序值',
            trigger: 'blur'
          }],
          origin_price: [{
            required: true,
            message: '请输入市场价格',
            trigger: 'blur'
          }],
          actual_price: [{
            required: true,
            message: '请输入售卖价格',
            trigger: 'blur'
          }]
        },
        form_photo: {
          fileList: [{
            required: true,
            message: '请上传图片',
            trigger: 'blur'
          }]
        },
        form_detail: {
          htmlContent: [{
            required: true,
            message: '商品详情不能为空',
            trigger: 'blur'
          }]
        }
      },
      goods_catOptions: [
        {
          value: 'zhinan',
          label: '指南',
        },
        {
          value: 'zhinan1',
          label: '指南1',
        }
      ],
      goods_statusOptions: [{
        "label": "出售中",
        "value": 1
      }, {
        "label": "已下架",
        "value": 2
      }],
      isRecommendOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      isNewOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      isHotOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      is_free_expressOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      goods_catProps: {
        "multiple": false
      },
    }
  },
  mounted () {

  },
  methods: {
    tabClick (tab) {
      this.tabName = tab.name
    },
    getGoods_catOptions () {
      // TODO 发起请求获取数据
      this.goods_catOptions
    },
    // 确认新增或修改
    submitForm () {
      // this.$emit('update:confirmLoading', true)
      // this.$nextTick(() => {


      // this.state === 'create' ? this.handleCreate() : this.handleUpdate()
      // })
      for (let val of this.tabList) {
        console.log(val, [`form_${val}`]);
        console.log('123123', this.$refs[`form_${val}`]);
        let isSuccess = true
        this.$refs[`form_${val}`].validate(valid => {
          console.log(valid);
          if (!valid) {
            isSuccess = false
            return false
          }
        })
        if (!isSuccess) {
          this.tabName = val
          console.log('验证失败');
          return
        } else {
          console.log('验证成功');
        }
      }
    },
    // 新增商品
    handleCreate () {
      addGoodsItem(this.currentForm)
        .then(res => {
          this.updateData({
            type: 'add',
            name: 'goods-admin-list',
            data: { ...res.data, sales_sum: 0 }
          })

          this.$message.success('操作成功')
          this.$emit('close')
        })
        .finally(() => {
          this.$emit('update:confirmLoading', false)
        })
    },
    // 更新商品
    handleUpdate () {
      setGoodsItem(this.currentForm)
        .then(res => {
          this.updateData({
            type: 'set',
            name: 'goods-admin-list',
            srcId: res.data.goods_id,
            data: { ...res.data }
          })

          this.$message.success('操作成功')
          this.$emit('close')
        })
        .finally(() => {
          this.$emit('update:confirmLoading', false)
        })
    },
    resetForm () {
      this.$confirm('此操作将重置所有商品信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let val of this.tabList) {
          this.$refs[`form_${val}`].resetFields()
        }
        this.$message({
          type: 'success',
          message: '重置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      });

    },
    //上传图片事件回调
    handleImage () {

    },
  }
}
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  padding-left: 20px;
  background-color: #fff;
}
</style>